<!DOCTYPE html>
<html>
<head>
  <style>
    /* 遮罩层 - Grid容器 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      display: none; /* 默认隐藏 */
      /* 核心：Grid居中 */
      display: none;
      place-items: center;
    }

    /* 弹窗内容 */
    .modal {
      width: 300px;
      padding: 20px;
      background: white;
      border-radius: 6px;
    }

    button {
      padding: 8px 16px;
      margin: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button onclick="document.querySelector('.overlay').style.display = 'grid'">
    打开弹窗（Grid布局）
  </button>

  <div class="overlay">
    <div class="modal">
      <h3>弹窗标题</h3>
      <p>这是用Grid布局实现的居中</p>
      <button onclick="document.querySelector('.overlay').style.display = 'none'">关闭</button>
    </div>
  </div>
</body>
</html>
